<template>
  <div class="order-container">
    <SearchInput
      placeholder="商品名称"
      showBack
      :showBtn="false"
      @focus="$router.push({ name: 'order-search' })"
    />
    <van-tabs class="tabs" v-model="order_status" @change="tabChange">
      <van-tab title="全部" name="" />
      <van-tab title="已付款" name="已支付" />
      <van-tab title="待收货" name="已发货" />
      <van-tab title="未评价" name="已收货" />
      <van-tab title="已评价" name="已评价" />
      <van-tab title="待退款" name="待退款" />
      <van-tab title="已退款" name="已退款" />
    </van-tabs>
    <OrderList
      v-model="listLoad"
      :finished="finished"
      :orderList="orderList"
      @next="getNext"
      @deal="dealOrder"
    />
  </div>
</template>
<script>
export default {
  middleware: "authenticated",
  layout: "notabbar",
  async asyncData({ query, app }) {
    const { order_status } = query;
    let orderList = [],
      total = 0,
      page = 1,
      finished = true;
    try {
      const {
        data,
        total: t,
        page: p,
        pagesize,
        status
      } = await app.$apiGetOrder({
        order_status
      });
      if (status === 0) {
        orderList = data;
        finished = p * pagesize >= t;
        page = p + 1;
        total = t;
      }
    } catch (error) {
      console.log(error);
    }
    return { orderList, finished, page, pagesize: 10, order_status, total };
  },
  data: () => ({
    order_status: "",
    orderList: [],
    listLoad: false,
    finished: true
  }),
  methods: {
    // tab 切换
    tabChange(order_status) {
      this.getOrderList({ order_status });
    },
    // 获取下一页
    getNext() {
      const { page, order_status } = this;
      console.log(" 获取下一页");
      this.getOrderList({ page, order_status }, true);
    },
    // 获取订单列表
    getOrderList(data, isConcat) {
      this.listLoad = true;
      const loading = this.$helperLoadding();
      this.$apiGetOrder(data)
        .then(res => {
          const { page, pagesize, total, data, status } = res;
          if (status === 0) {
            this.finished = page * pagesize >= total;
            this.orderList = isConcat ? this.orderList.concat(data) : data;
            this.page = page + 1;
          }
        })
        .finally(() => {
          loading.clear();
          this.listLoad = false;
        });
    },
    // 处理订单
    dealOrder(info) {
      const data = { type: info.type, order_id: info.order.order_id };
      const loading = this.$helperLoadding();
      const order_status = this.order_status;
      this.$apiUpdateOrder(data)
        .then(res => {
          if (res.status === 0) {
            this.getOrderList({ order_status });
          }
        })
        .finally(() => {
          info.cb();
          loading.clear();
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.order-container {
  padding: 100px 0 0;
  background-color: #e9e9e9;
  min-height: 100vh;
  box-sizing: border-box;
  ::v-deep .search-input {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 1;
  }
  ::v-deep > .van-list {
    background-color: #e9e9e9;
  }
}
.tabs {
  position: fixed;
  top: 50px;
  left: 0;
  right: 0;
  background: #e9e9e9;
  z-index: 1;
  ::v-deep .van-tabs__nav {
    background: inherit;
  }
  ::v-deep .van-tab--active{
    color: #ee0a24;
  }
}
</style>
